import React from 'react'
import ReactEcharts from "echarts-for-react";
import * as echarts from 'echarts'
import { connect } from 'react-redux';
import { withRouter,Link } from 'react-router-dom';
import CurveDatePicker from '&components/datePicker'
import '../index.css'

class AverageRateLine extends React.Component {
  constructor(props){
        super(props);
        this.state={
            
        };
        // this.indicator = []
  }
  componentDidMount() {
    const data = this.props.averageRateData
    // myChart.showLoading();
    var myChart = echarts.init(document.getElementById('avgLine'));
    myChart.setOption({
      title:{
        text:'平均腐蚀速率'
      },
      xAxis: {
        type: 'category',
        data: data.time || [],
      },
      yAxis: {
        type: 'value'
      },
      series: {
        type:'line',
        data: data.value || []
      }
    })
  }
  
  componentDidUpdate() {
    const data = this.props.averageRateData
    // myChart.showLoading();
    var myChart = echarts.init(document.getElementById('avgLine'));
    myChart.setOption({
      title:{
        text:'平均腐蚀速率'
      },
      xAxis: {
        type: 'category',
        data: data.time || [],
      },
      yAxis: {
        type: 'value'
      },
      series: {
        type:'line',
        data: data.value || []
      }
    })
  }
  //   setInterval(() => {
  //     myChart.setOption({
  //         title:{
  //           text:'平均腐蚀速率'
  //         },
  //         xAxis: {
  //           type: 'category',
  //           data: data.time || [],
  //         },
  //         yAxis: {
  //           type: 'value'
  //         },
  //         series: {
  //           type:'line',
  //           data: data.value || []
  //         }
  //     })
  //   }, 500);

  render(){
    const { width, height } = this.props; 
    return (
      <div className={this.props.choice !== 'all' ? 'curveContent' : ''}>
        {''}
        <div id="avgLine"  style={{width: width, height: height}}>
        </div>
        <CurveDatePicker choice={4}></CurveDatePicker>
      </div>
    )
  }
}


const mapStateToProps = (state) => ({ choice:state.equipmentPage.choice, averageRateData:state.equipmentPage.averageRateData,width:state.equipmentPage.width,height:state.equipmentPage.height});
const mapDispatchToProps = dispatch => {
  return {
    getBackImg: dispatch.equipmentPage.getBackImg,
    getCurve: dispatch.equipmentPage.getCurve,
  }
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(AverageRateLine));